<meta charset="UTF-8">
<style>
  *{margin:0px;padding:0px;}
  body{
    background:url(https://img2.baidu.com/it/u=57628836,2989936375&fm=253&fmt=auto&app=138&f=JPEG?w=767&h=500);
    background-size:cover;
  }
  .login_div{
    background:rgba(0,0,0,0.3);
    position:absolute;
    color:white;
    left:50%;
    top:20%;
    margin-left:-150px;
    width:300px;
    height:300px;
    padding:20px;
    border: 1px solid #ccc;
  }
  #yzm{
    margin-left:auto;
    margin-right:auto;
    width:260px;
  }
  .company_name{
    font-size:18px;
    text-align: center;
    margin-top:10px;
    margin-bottom: 10px;
  }
  .input_div{
    margin-top:20px;
    margin-bottom:20px;
    text-align: center;
  }
  input{
    width:260px;
    height:36px;
    outline: none;
    padding-left:5px;
  }
  .btn{
    width:260px;
    height:36px;
    line-height: 36px;
    background:orange;
    margin-top:30px;
    text-align: center;
    border-radius: 3px;
    margin-left:auto;
    margin-right:auto;
  }
  .btn_login{
    background-image:url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg width='80px' height='80px' viewBox='0 0 80 80' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Ctitle%3Eloading%3C/title%3E%3Cdefs%3E%3ClinearGradient x1='94.0869141%25' y1='0%25' x2='94.0869141%25' y2='90.559082%25' id='linearGradient-1'%3E%3Cstop stop-color='%23606060' stop-opacity='0' offset='0%25'%3E%3C/stop%3E%3Cstop stop-color='%23606060' stop-opacity='0.3' offset='100%25'%3E%3C/stop%3E%3C/linearGradient%3E%3ClinearGradient x1='100%25' y1='8.67370605%25' x2='100%25' y2='90.6286621%25' id='linearGradient-2'%3E%3Cstop stop-color='%23606060' offset='0%25'%3E%3C/stop%3E%3Cstop stop-color='%23606060' stop-opacity='0.3' offset='100%25'%3E%3C/stop%3E%3C/linearGradient%3E%3C/defs%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd' opacity='0.9'%3E%3Cg%3E%3Cpath d='M40,0 C62.09139,0 80,17.90861 80,40 C80,62.09139 62.09139,80 40,80 L40,73 C58.2253967,73 73,58.2253967 73,40 C73,21.7746033 58.2253967,7 40,7 L40,0 Z' fill='url(%23linearGradient-1)'%3E%3C/path%3E%3Cpath d='M40,0 L40,7 C21.7746033,7 7,21.7746033 7,40 C7,58.2253967 21.7746033,73 40,73 L40,80 C17.90861,80 0,62.09139 0,40 C0,17.90861 17.90861,0 40,0 Z' fill='url(%23linearGradient-2)'%3E%3C/path%3E%3Ccircle id='Oval' fill='%23606060' cx='40.5' cy='3.5' r='3.5'%3E%3C/circle%3E%3C/g%3E%3CanimateTransform attributeName='transform' begin='0s' dur='1s' type='rotate' values='0 40 40;360 40 40' repeatCount='indefinite'/%3E%3C/g%3E%3C/svg%3E%0A");
    background-repeat: no-repeat;
    background-size:16px;
    background-position:63% center;
  }
</style>
<div class="login_div">
  <div>登录:</div>
  <div class="company_name">新凌通信物料管理系统</div>
  <div class="input_div">
    <input id="u" placeholder="用户名" /></div>
  <div class="input_div">
    <input id="p" placeholder="密码" type="password" /></div>
  <div class="input_div" style="height:40px;">
    <div id="yzm"></div>
  </div>

  <div id="b" class="btn" >登录</div>
</div>
<script src="https://static.geetest.com/v4/gt4.js">
</script>
<script>
  function login(){
    b.className = "btn btn_login";
    var req = new XMLHttpRequest();
    req.open("post","/sysuser_login");
    req.setRequestHeader("Content-Type",
            "application/json;charset=utf-8")
    var data = {
      username:u.value,
      password:p.value
    }
    req.send(JSON.stringify(data));
    req.onreadystatechange = function(){
      if(req.readyState==4&&
              req.status==200){
        if(req.responseText.trim()=="no"){
          alert("您的用户名或密码有误！");
        }else{
          location="/index.html";
        }
        b.className = "btn";
      }
    }
  }

  initGeetest4({
    captchaId: '86cf2aeac112c84400d7c22b18e5f86d'
  },function (captcha) {
    // captcha为验证码实例
    captcha.appendTo("#yzm");// 调用appendTo将验证码插入到页的某一个元素中，这个元素用户可以自定义
    b.onclick = function(){
      if(captcha.getValidate()){
        login();
      }else{
        //alert("no");
        alert('请完成验证');
      }
    }
  });
</script>